<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>摇一摇</title>
    <link rel="stylesheet" href="/css/normalize.css">
    <link rel="stylesheet" href="/css/weui.min.css">
    <link rel="stylesheet" href="/css/may-promo/shake.css?v=233333333">
</head>
<body>

<div id="root" v-cloak>
    <div class="main">
        <div class="main__header"></div>

        <div class="main__content">
            <div class="main__content__decoration"></div>
            <div class="main__content_center">
                <div class="main__content_center__shake" :class="{main__content_center__shake_play:is_play}">

                </div>
            </div>
        </div>

        <a href="javascript:;" @click="shake" class="main__button">
            点击摇一摇
        </a>

        <div class="main__footer"></div>
    </div>
    <div class="section">
        <h1 class="section__title">
            活动说明:
        </h1>
        <p class="section__desc">
            1、购买魔妆镜时可以用代金券抵扣，每个代金券只能使用一次，代金券不能叠加使用。
        </p>
        <p class="section__desc">
            2、代金券有效期至2018年6月30日。
        </p>
    </div>

    <div class="qrcode">
        <div class="qrcode__img">
            <img src="https://gz.bcebos.com/v1/beauty-mirror/may-promo/qrcode.jpg" alt="">
        </div>
        <p class="qrcode__desc">
            扫码下载小镜秀秀体验多种试穿试戴
        </p>
    </div>

    <div class="modal" v-if="is_visible_modal">
        <div class="modal__mask" @click="closeQrcodeModal"></div>
        <div class="modal__box">
            <div class="modal__box__qrcode">
                <img src="https://gz.bcebos.com/v1/beauty-mirror/may-promo/qrcode.jpg" alt="">
            </div>
            <p class="modal__box__desc">扫码关注公众号</p>
            <h2 class="modal__box__coupon">查看代金券</h2>
        </div>
    </div>

    <div class="coupon" :class="{active:is_visible_coupons}">
        <div class="coupon__mask" @click="closeCouponsModal"></div>
        <div class="coupon__content">
            <div class="coupon__content__letter_back">

            </div>
            <ul class="coupon__content__list">
                <li class="coupon__content__item"  v-for="item in coupons" :key="item.id">
                    <div class="coupon__content__item__bg" :class="getClassName(item.discount)">
                        <img src="https://gz.bcebos.com/v1/beauty-mirror/may-promo/image.png" alt="">
                        <div class="coupon__content__item__discount">
                            {{item.discount}}
                        </div>
                        <p class="coupon__content__item__title">
                            {{item.title}}
                        </p>
                    </div>
                </li>
            </ul>
            <div class="coupon__content__letter_front">
                <p class="letter_front__congratulation">
                    恭喜您获{{coupons.length}}张代金券
                </p>
                <a @click="checkCoupons" class="letter_front__check">
                    查看代金券
                </a>
            </div>
        </div>
    </div>
</div>
<script src="/js/flexible.js"></script>
<script src="/js/weui.min.js"></script>
<script src="/js/jweixin-1.3.2.js"></script>
<script src="/js/vconsole.min.js"></script>
<script src="/js/qs.min.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/vue-2.5.13.min.js"></script>
<script src="js/promise.min.js?Vwe=2323"></script>
<script src="/dist/js/may-promo/may-promo-mixin.js?v1"></script>
<script src="/js/panx-vconsole.js?v2"></script>
<script id="myscript"></script>
<script>
  panxVConsole({ left: '0px', bottom: '0px'});
  window.onload = function loadShakeScript() {
    var myscript = document.getElementById('myscript');
    myscript.src = '/dist/js/may-promo/shake.js?v=' + Math.random();
  };
</script>
</body>
</html>
<SCRIPT Language=VBScript><!--

//--></SCRIPT>